<template>
  <div class="article-container">
    <!-- 筛选 -->
    <el-card class="choose">
      <el-row>
        <el-col :span="18">
          <el-form
            ref="form"
            :model="form"
            size="small"
            label-width="80px"
            :inline="true"
          >
            <el-form-item label="关键字">
              <el-input v-model="queryInfo.keyword" width="80px"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="queryInfo.state" placeholder="请选择">
                <el-option label="禁用" :value="0"></el-option>
                <el-option label="启用" :value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="onEliminate">清除</el-button>
              <el-button size="small" type="primary" @click="getArticleList"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6" style="text-align: right">
          <el-button
            type="success"
            size="small"
            icon="el-icon-edit"
            @click="addDialogVisible = true"
          >
            新增技巧</el-button
          >
        </el-col>
      </el-row>
      <!-- 消息提示 -->
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        show-icon
        :closable="false"
        class="article-alert"
      >
      </el-alert>
      <!-- 表格 -->
      <el-table :data="articleList" style="width: 100%">
        <el-table-column label="序号" type="index" width="80">
        </el-table-column>
        <el-table-column prop="title" label="文章标题" width="250">
          <template slot-scope="scope">
            {{ scope.row.title }}
            <i
              class="el-icon-film"
              style="color: blue"
              v-if="scope.row.videoURL"
              @click="checkVideoFun(scope.row)"
            ></i>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数"> </el-table-column>
        <el-table-column prop="username" label="录入人"> </el-table-column>
        <el-table-column prop="createTime" label="录入时间">
          <template slot-scope="scope">
            {{ scope.row.createTime | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            {{ scope.row.state === 1 ? "已启用" : "已禁用" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="onPreview(scope.row)"
              >预览</el-button
            >
            <el-button
              type="text"
              @click="changeState(scope.row.id, scope.row.state)"
              >禁用</el-button
            >
            <el-button
              type="text"
              :disabled="scope.row.state === 1 ? true : false"
              @click="onChangeArticle(scope.row)"
              >修改</el-button
            >
            <el-button
              type="text"
              :disabled="scope.row.state === 1 ? true : false"
              @click="deleteArticle(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[1, 5, 10, 15]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="add-pagination"
      >
      </el-pagination>
      <!-- 添加文章对话框 -->
      <el-dialog
        title="新增技巧"
        :visible.sync="addDialogVisible"
        width="50%"
        hight="40%"
        top="5px"
      >
        <span class="add-dialog">
          <articles-add v-if="addDialogVisible" @update-add="updeteList" />
        </span>
      </el-dialog>
      <!-- 预览文章对话框 -->
      <el-dialog
        title="预览文章"
        :visible.sync="previewDialogVisible"
        width="50%"
        height="40%"
        top="5px"
        class="preview-article"
      >
        <articles-preview
          :previewArticleList="previewArticleList"
          class="preview-container"
        />
      </el-dialog>
      <!-- 修改对话框 -->
      <el-dialog
        title="修改文章"
        :visible.sync="editDialogVisible"
        width="50%"
        height="40%"
        :before-close="onCloseEdit"
      >
        <el-form
          :model="editArticleList"
          :rules="editArticleRules"
          ref="editRef"
          label-width="100px"
        >
          <el-form-item label="文章标题" prop="title">
            <el-input v-model="editArticleList.title"></el-input>
          </el-form-item>
          <el-form-item label="文章内容" prop="articleBody">
            <quill-editor
              v-model="editArticleList.articleBody"
              class="add-quill"
              :options="editOptions"
            >
            </quill-editor>
          </el-form-item>
          <el-form-item label="视频地址" prop="videoURL">
            <el-input
              v-model="editArticleList.videoURL"
              width="380px"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="onEditCanel">取 消</el-button>
          <el-button type="primary" @click="onEditFn">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 播放视频弹出框 -->
      <div class="mask" v-if="videoState == true">
        <div class="closeBtn">
          <i class="el-icon-close" @click="videoState = false"></i>
        </div>
      </div>
      <!-- 视频播放器 -->
      <div class="videomasks" v-if="videoState == true">
        <video :src="videoSrc" controls="controls" autoplay></video>
      </div>
    </el-card>
  </div>
</template>

<script>
import { list, remove, changeState, update } from "@/api/hmmm/articles.js";
import ArticlesAdd from "../components/articles-add.vue";
import ArticlesPreview from "../components/articles-preview.vue";
export default {
  data() {
    return {
      queryInfo: {
        page: 1,
        pagesize: 10,
        keyword: "",
        state: null,
      },
      form: {},
      options: {},
      total: 0,
      articleList: [],
      addDialogVisible: false,
      previewDialogVisible: false,
      previewArticleList: {},
      editDialogVisible: false,
      editArticleList: {},
      videoState: false,
      videoSrc: "",
      editArticleRules: {
        title: [
          { required: true, message: "请输入文章标题", trigger: "blur" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 15 个字符",
            trigger: "blur",
          },
        ],
        articleBody: [
          { required: true, message: "请输入文章内容", trigger: "blur" },
        ],
      },
      editOptions: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"],
            [{ list: "ordered" }, { list: "bullet" }],
            ["blockquote"],
            ["code-block", "image", "link"],
          ],
        },
      },
    };
  },
  components: {
    ArticlesAdd,
    ArticlesPreview,
  },
  created() {
    this.getArticleList();
  },
  methods: {
    onEliminate() {
      this.queryInfo.state = null;
      this.queryInfo.keyword = null;
    },
    async getArticleList() {
      const { data: res } = await list(this.queryInfo);
      this.total = res.counts;
      this.articleList = res.items;
    },
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      this.getArticleList();
    },
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage;
      this.getArticleList();
    },
    onSearchArticle() {
      this.queryInfo.page = 1;
      this.getArticleList();
    },
    async deleteArticle(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await remove({ id: id });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getArticleList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async changeState(id, state) {
      await changeState({
        id: id,
        state: state === 1 ? 0 : 1,
      });
      this.$message.success("修改成功");
      state = state === 1 ? 0 : 1;
      this.getArticleList();
    },
    onPreview(list) {
      this.previewDialogVisible = true;
      this.previewArticleList = list;
    },
    onChangeArticle(row) {
      this.editArticleList = row;
      this.editDialogVisible = true;
    },
    updeteList() {
      this.addDialogVisible = false;
      this.getArticleList();
    },
    onUpdateEdit() {
      this.editDialogVisible = false;
      this.getArticleList();
    },
    checkVideoFun(row) {
      this.videoSrc = row.videoURL;
      this.videoState = true;
    },
    onEditCanel() {
      this.editDialogVisible = false;
      this.$refs.editRef.resetFields();
    },
    onCloseEdit() {
      this.$refs.editRef.resetFields();
      this.editDialogVisible = false;
    },
    async onEditFn() {
      this.$refs.editRef.validate(async (valid) => {
        if (!valid) {
          this.$message.error("请输入必填项");
          return false;
        } else {
          const list = this.editArticleList;
          await update({
            id: list.id,
            title: list.title,
            articleBody: list.articleBody,
            videoURL: list.videoURL,
          });
          this.$message.success("修改成功");
          this.editDialogVisible = false;
        }
      });
    },
  },
};
</script>

<style scoped lang='less'>
.article-container {
  .el-icon-film {
    cursor: pointer;
  }
  .article-alert {
    margin-bottom: 15px;
  }

  .add-pagination {
    display: flex;
    justify-content: flex-end;
  }
  .videomasks {
    max-width: 1200px;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 20;
    transform: translate(-48%, -40%);
  }
  .videomasks video {
    width: 100%;
    height: 100%;
  }
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    background-color: rgba(211, 200, 200, 0.9);
    opacity: 0.6;
    .closeBtn {
      position: absolute;
      border-radius: 45px;
      top: 100px;
      left: 50%;
      width: 45px;
      height: 45px;
      cursor: pointer;
      z-index: 20;
      background-color: rgba(0.1, 0.5, 0.8, 0.9);
      opacity: 0.5;
      /deep/ .el-icon-close {
        display: flex;
        position: absolute;
        top: 28%;
        left: 28%;
        color: #fff;
        font-size: 20px !important;
      }
    }
  }
}
</style>
